<template>
  <!--  整个容器-->
  <!--  <div class="login_container">-->
  <div class="login_main_container">
    <el-image
      :src="require('@/assets/img/bgHero.jpg')"
      fit="fill"
      style="
        width: 100%;
        height: 100%;
        /*border-radius: 30px;*/
        /*filter: brightness(50%);*/
        /*opacity: 0.5;*/
      "
    ></el-image>
    <div class="login_box">
      <h1 class="login_title">PaperDevelop</h1>
      <h1 class="login_title">基于版本管理的论文一站式培养系统</h1>
      <el-form
        ref="loginFromRef"
        :model="loginFrom"
        :rules="loginFrom_rules"
        label-width="100px"
        class="login_form"
      >
        <el-form-item prop="username" label="账号" class="item">
          <el-input
            prefix-icon="el-icon-user"
            placeholder="学号/工号"
            v-model="loginFrom.username"
            style="width: 70%"
          ></el-input>
        </el-form-item>

        <el-form-item prop="password" label="密码" class="item">
          <el-input
            prefix-icon="el-icon-s-goods"
            type="password"
            placeholder="请输入密码"
            v-model="loginFrom.password"
            autocomplete="off"
            style="width: 70%"
          ></el-input>
        </el-form-item>

        <el-form-item label="验证码" style="height: 50px" class="item">
          <el-input
            placeholder="请输入验证码"
            v-model="loginFrom.captchaCode"
            style="display: inline-block; width: 70%"
          >
          </el-input>
          <el-image
            :src="pic"
            @click="getCaptcha"
            style="float: right"
          ></el-image>
        </el-form-item>

        <el-form-item class="btns">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button @click="to_register">学生注册</el-button>
        </el-form-item>

        <el-form-item label="第三方登录" class="item">
          <el-button
            style="
              padding: 0;
              background-color: transparent;
              border: 0;
              margin-left: 40%;
            "
            @click="yuque"
          >
            <el-image
              :src="require('@/assets/yuque.jpg')"
              style="height: 40px; width: 40px; border-radius: 20px"
            ></el-image>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <!--  </div>-->
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      //登录表单数据绑定对象
      loginFrom: {
        username: '',
        password: '',
        captchaCode: '',
      },
      // 默认记住登录
      remember_me: 'true',
      pic: '',
      //登录表单的验证规则对象
      loginFrom_rules: {
        //验证用户名是否合法
        username: [
          { required: true, message: '必须输入学号或工号', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur',
          },
        ],
        //验证密码是否合法
        password: [
          { required: true, message: '必须输入密码', trigger: 'blur' },
          {
            min: 3,
            max: 99,
            message: '长度在 3 到 99 个字符',
            trigger: 'blur',
          },
        ],
      },
    };
  },
  // mounted() {
  //   this.getCookie();
  // },
  methods: {
    //表单重置
    //this.$refs.loginFromRef是表单的引用对象，操作引用对象相当于直接对dom进行操作
    to_register() {
      this.$router.push('/register');
    },

    login() {
      this.$refs.loginFromRef.validate(async (jud) => {
        if (!jud) return; //合格返回true，不合格返回false
        let data =
          this.qs.stringify(this.loginFrom) +
          '&remember-me=' +
          this.remember_me;
        // console.log(data)
        //发起登录请求
        // console.log(this.loginFrom)
        //this后面加的qs.stringfy为解决跨域问题添加的
        // console.log(typeof this.qs.stringify(this.registerFrom))
        const { data: res } = await this.$http.post('user/login', data);
        //const {data:res}=  await this.$http.post("login",this.loginFrom);//请求前要打开数据库和app.js
        // console.log(res);
        if (res.code !== 200) this.$message.error(res.message);
        else {
          this.$message.success('登录成功');
          //在网站打开期间，用Windows对象存储token
          // window.sessionStorage.setItem('token', res.data.token);
          axios.get('user/checkUserInfo').then((response) => {
            console.log(response.headers);
            this.$store.commit('login', response.data.data);
            //console.log(response.data.data);
            // window.localStorage.setItem(
            //     "userInfo",
            //     JSON.stringify(response.data.data)
            // );
            // console.log(this.$store.getters.user)
            let path = this.$route.query.redirect;
            if (path === '/' || path === undefined) {
              if (response.data.data.ring === 4)
                this.$router.push('/index/appraise/list');
              else if (response.data.data.ring === 3)
                this.$router.push('/index/appraise/list_3');
              else if (response.data.data.ring === 2)
                this.$router.push('/admin/userAdmin/common');
              else if (response.data.data.ring === 1)
                this.$router.push('/admin/userAdmin/common');
              else this.$router.push('/admin/userAdmin/common');
            } else {
              this.$router.replace({
                path: path,
              });
            }
          });

          // 登录成功后存储到浏览器中，同时修改vuex值

          // console.log(this.document.cookie);
          //登录成功后的行为：跳到主页
          // await this.$router.push("/home");
        }
      });
    },

    // 获得验证码图片
    getCaptcha() {
      axios.get('user/captcha', { responseType: 'blob' }).then((response) => {
        let blob = new Blob([response.data]);
        this.pic = window.URL.createObjectURL(blob);
      });
    },

    yuque() {
      window.location.href = 'https://106.14.30.10:8086/login/yuque';
    },
  },

  created() {
    document.title = 'PaperDevelop 基于版本管理的论文一站式培养系统';
    this.getCaptcha();
  },
};
</script>


<style lang="less">
.login_container {
  background: radial-gradient(200% 100% at bottom center, #000000, #0e1d8a);
  height: 100%;
}

.login_main_container {
  border: none;
  //border-radius: 30px;
  width: 100%;
  height: 100%;
  min-width: 1350px;
  min-height: 750px;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  //overflow: auto;
}

.login_box {
  //width: 450px;
  //height: 300px;
  //background-color: #41ada0;
  background-color: transparent;
  border-radius: 30px;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  position: absolute;
  min-width: 450px;
  //left: 50%;
  //top: 50%;
  //transform: translate(-50%, -50%);
  //box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .4)
}

.login_title {
  color: white;
  position: relative;
  top: 18%;
  text-align: center;
}

.login_form {
  position: relative;
  top: 22%;
  //bottom: 0;
  width: 70%;
  padding: 0 10px;
  box-sizing: border-box;
  margin-left: 10%;
}

.btns {
  display: flex;
  justify-content: center;
}

.item .el-form-item__label {
  color: white;
}
</style>
